<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设备地图</title>
    <link rel="stylesheet" href="css/reset.css">
    <style>
        html,body {
            font-family: 'Microsoft YaHei';
            font-size: 14px;
            line-height:1;
            color: #666;
            width: 100%;
            height:100%;
            position: relative;
        }
        a {
            text-decoration: none;
            color: #666;
        }
        .fl {
            float: left;
        }
        .fr {
            float: right;
        }
        .container {
            width: 1200px;
            margin: 0 auto;
            overflow: hidden;
        }
        input {
            font-family: "Microsoft YaHei";
            color: #666;
            border: none;
        }
        input:focus {
            outline-color: transparent;
        }
        .placeholder {
            color: #edcb9d!important;
        }
        /* 面包屑 */
        .top {
            border-bottom: 2px solid #f3af33;
            box-sizing: border-box;
            overflow: hidden;
        }
        .top .top-title {
            font-size: 18px;
            font-weight: bold;
            color: #f3af33;
            margin-bottom: 9px;
        }
        .top ul.top-list {
            margin-top: 6px;
        }
        .top ul.top-list li{
            float: left;
        }
        .top ul.top-list li a {
            color: #666;
            font-size: 14px;
            border-right: 1px solid #989898;
            display: block;
            padding: 0 14px;
        }
        .top ul.top-list li.active a {
            color: #f3af33;
        }
        .top ul.top-list li:last-child a {
            border-right: 0;
            padding-right: 0;
        }


        /*地图区域*/
        .map_box {
            height: 844px;
            margin:15px 13px 0;
            position: relative;
            overflow: hidden;
        }
        #allmap{
            width:100%;
            height:100%;
            z-index: -2;
        }
        .device-searching-container {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 326px;
            height: 768px;

            box-shadow: 1px 1px 3px #dcdad8;
            z-index: 5;
        }
        .device-searching-top {
            width: 100%;
            height: 149px;
            border-radius: 4px 4px 0 0;
            background: #f3af33;
            overflow: hidden;
        }

        .close-btn {
            position: absolute;
            top: 11px;
            right: 11px;
            cursor: pointer;
            width: 14px;
            height: 14px;
            background: url("image/icon.png") no-repeat -138px 0;
        }
        .device-searching-box {
            width: 263px;
            height: 35px;
            background: #de9c24;
            border-radius: 18px;
            margin: 47px auto 31px;
            position: relative;
        }
        .search-input {
            width: 100%;
            height: 35px;
            line-height: 35px;
            background: transparent;
            box-sizing: border-box;
            padding: 0 27px;
            color: #edcb9d;
        }
        ::-webkit-input-placeholder {
            color: #edcb9d;
        }
        :-moz-placeholder {/* Firefox 18- */
            color: #edcb9d;
        }
        ::-moz-placeholder {/* Firefox 19+ */
            color: #edcb9d;
        }
        :-ms-input-placeholder {
            color: #edcb9d;
        }

        .device-searching-box a {
            cursor: pointer;
            position: absolute;
            top: 8px;
            right: 14px;
            width: 25px;
            height: 25px;
            line-height: 25px;
            text-align: center;
        }
        .device-searching-box a::after {
            content: url("image/search_icon.png");
            width: 16px;
            height: 16px;
            display: inline-block;
        }

        /*设备搜索tab*/
        .device-searching-tab {
            padding:0 8px;
            width: 100%;
            box-sizing: border-box;
            height: 36px;
            overflow: hidden;
        }
        .device-searching-tab li {
            width: 33.33%;
            float: left;
            cursor: pointer;
        }
        .device-searching-tab li a {
            display: block;
            color: #fff;
            text-align: center;
            font-size: 12px;
            font-weight: bold;
            line-height:36px;
        }
        .device-searching-tab li.active {
            border-radius: 4px 4px 0 0;
            background: #fff;
        }
        .device-searching-tab li.active a {
            color: #f3af33;
        }

        /*设备搜索列表*/
        .tab-content {
            overflow: hidden;
            height: 619px;
            background:#fff;
        }
        .device-searching-list {
            height: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: 28px 34px 12px 25px;
            overflow-y: scroll;
        }
        li.device-searching-item {
            margin-bottom: 20px;
        }
        li.device-searching-item a {
            overflow: hidden;
            display: block;
            font-size: 13px;
            position: relative;
        }
        li.device-searching-item.online a{
            color: #666;
        }
        li.device-searching-item.offline a{
            color: #b2b2b2;
        }
        li.device-searching-item.active a{
            color: #ecac3b;
        }

        li.device-searching-item a .listicon {
            width: 14px;
            height: 14px;
            position: absolute;
            top: 0;
            left:0;
        }
        li.device-searching-item.online a .listicon {
            background: url("image/listicon_on.png");
        }
        li.device-searching-item.offline a .listicon {
            background: url("image/listicon_off.png");
        }
        li.device-searching-item.active a .listicon {
            background: url("image/listicon_Orange.png");
        }

        li.device-searching-item .device-number {
            margin-right: 14px;
            padding-left: 28px;
            width: 64px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .customer-name {
            width: 140px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .pickupBtn {
            display: block;
            width: 62px;
            height: 62px;
            position: absolute;
            top:0;
            left:0;
            background: url("image/pickupBtn.png") no-repeat center center;
        }
        .pickupBtn:active {
            background-image: url("image/pickupBtn_on.png");
        }


        /*自定义地图信息窗口样式*/
        .BMap_bubble_title {
            line-height: 16px!important;
            color: #f3af33;
            font-size:16px;
            font-weight:bold;
            margin:0 0 0 3px;
        }
        .pop .top,.pop .center {
            border: none!important;
        }

        .pop > img:nth-of-type(1){
            opacity: 0;
            width: 20px!important;
            height: 25px!important;
            top: 0!important;
            left: 336px!important;
        }
        .pop::after {
            content: '';
            width: 20px!important;
            height: 25px!important;
            background: url("image/close.png");
            display: block;
            position: absolute;
            top: 0!important;
            left: 336px!important;
            z-index: 99;
        }

        .pop > div:nth-child(1) img,.pop > div:nth-child(3) img,.pop > div:nth-child(5) img,.pop > div:nth-child(7) img {
            opacity: 0;
        }
        .pop > div:nth-child(1),.pop > div:nth-child(3),.pop > div:nth-child(5),.pop > div:nth-child(7){
            width: 40px!important;
            height: 40px!important;
            background: #fff;
            border-radius: 10px;
        }
        .pop > div:nth-child(3) {
            left:330px!important;
        }
        .pop > div:nth-child(5){
            top: 174px!important;
        }
        .pop > div:nth-child(7){
            top: 174px!important;
            left: 330px!important;
        }

        .BMap_bubble_content div.BMap_con {
            background:#fffdfa;
            width: 340px;
            margin:10px auto 0;
            padding:15px;
            border:1px solid #ffeecf!important;
            border-radius:2px;
            color:#666;
            font-size:13px;
            line-height:22px;
            box-sizing: border-box;
        }
        .BMap_con p {
            margin: 0;
        }
        .BMap_btn {
            margin-top:11px;
            text-align: right;
        }
        .BMap_btn a {
            color: #fff;
            font-size: 12px;
            display: inline-block;
            text-align: center;
            line-height:26px;
            border-radius:15px;
            background: #f3af33;
            width:88px;
            height:26px;
            text-decoration: none;
        }
    </style>

</head>

<body>
<div class="container">
    <!-- 面包屑 -->
    <div class="top">
        <div class="top-title fl">
            <div>首页</div>
        </div>
        <ul class="top-list fr">
            <li><a href="monitorScreen.html">监控大屏</a></li>
            <li class="active"><a href="deviceMap.html">设备地图</a></li>
        </ul>
    </div>

    <div class="map_box">
        <div id="allmap"></div>
        <div class="device-searching-container">

            <div class="device-searching-top">
                <div class="device-searching-box">
                    <input type="text" class="search-input" placeholder="搜索编号、名称、卡号、型号" id="search-input">
                    <a class="search-icon"></a>
                </div>

                <!--设备搜索tab栏-->
                <ul class="device-searching-tab">
                    <li class="active" id="all-btn">
                        <a>所有<span id="allNum"></span></a>
                    </li>
                    <li id="online-btn">
                        <a>在线<span id="onlineNum"></span></a>
                    </li>
                    <li id="offline-btn">
                        <a>离线<span id="offlineNum"></span></a>
                    </li>
                </ul>

                <!--关闭按扭-->
                <div class="close-btn"></div>
            </div>

            <!--设备搜索列表-->
            <div class="tab-content">
                <!-- 所有 -->
                <ul class="device-searching-list" id="all"></ul>

                <!-- 在线 -->
                <ul class="device-searching-list" id="online"></ul>

                <!-- 离线 -->
                <ul class="device-searching-list" id="offline"></ul>
            </div>
        </div>

        <!--展开按钮-->
        <a type="button" class="pickupBtn"></a>
    </div>

</div>

<script src="js/plugin/jquery.js"></script>
<!--<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"></script>-->
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
<script type="text/javascript">
    // 百度地图API功能
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.417854,39.921988);
    map.centerAndZoom(point, 8);
    map.enableScrollWheelZoom(true);//滚轮缩放

    // 编写自定义函数,创建标注
    function addAllMarker(point,device){

        var marker = new BMap.Marker(point);  // 创建标注
        map.addOverlay(marker);             // 将标注添加到地图中

        //编写信息框内容
        var content =
            '<div class="BMap_con">' +
            '<p><span>控制器编号：</span><span>'+ device.dtu_id +'</span></p>' +
            '<p><span style="display:inline-block;">客户名称：</span><span>'+ device.customer_name +'</span></p>' +
            '<p><span>SIM卡号：</span><span>'+ device.sim_no +'</span></p>' +
            '<p><span>是否在线：</span><span style="color:#596679; font-weight:bold;">'+(device.is_connected==1?'在线':'离线') +'</span></p>' +
            '</div>' +
            '<div class="BMap_btn">' +
            '<a href="moreParam.html?dtu_id=' + device.dtu_id + '">查看参数</a>' +
            '</div>';

        addClickHandler(content,marker,point);//调用标注点击事件
    }

    var opts = {
        width : 340,     // 信息窗口宽度
        title : "<span style=''>设备信息</span>" , // 信息窗口标题
        enableMessage:true//设置允许信息窗发送短息
    };

    //编写标注点击事件
    function addClickHandler(content,marker,point){
        var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象
        marker.addEventListener("click", function(){//标注点击时，开启信息窗口
            map.openInfoWindow(infoWindow,point);
        });
    }

    // 编写自定义函数,创建信息窗口
    function setMarker(device) {

        var point = new BMap.Point(device.dtu_lng,device.dtu_lat);
        map.clearOverlays();//清除所有信息窗口
        map.centerAndZoom(point, 15);

        addAllMarker(point,device);
    }

</script>


<!--[if lte IE 9]>
<script src="js/plugin/jquery.placeholder.min.js"></script>
<script src="js/placeholder.js"></script>
<![endif]-->

<script>
    $(function(){
        var devices = [];

        var $all = $('#all');
        var $online = $('#online');
        var $offline = $('#offline');

        //编写自定义函数
        function addLi(data){
            //获取all,online,offline的个数分别写入all-btn,online-btn,offline-btn中
            var $allNum = $('#allNum');
            var $onlineNum = $('#onlineNum');
            var $offlineNum = $('#offlineNum');

            $allNum.text('(' + data.data.total + ')');
            $onlineNum.text('(' + data.data.online + ')');
            $offlineNum.text('(' + data.data.offline + ')');

            devices = data.data.devices;

            var allLi = '';
            var onlineLi = '';
            var offlineLi = '';
            for(var i=0; i < devices.length  ;i++){
                var clazz = devices[i].is_connected == 0 ? 'offline' :'online';
                var li = '<li id="' + i + '" class="device-searching-item ' + clazz + '">'+
                    '<a href="javascript:;">'+
                    '<span class="listicon"></span>'+
                    '<span class="device-number fl">'+ devices[i].dtu_id +'+</span>'+
                    '<span class="customer-name fl" >'+devices[i].customer_name +'</span>'+
                    '</a>'+
                    '</li>';
                if(devices[i].is_connected == 0){
                    offlineLi += li;
                }else{
                    onlineLi += li;
                }
                allLi += li;
            }
            $all.append(allLi);//#all插入列表内容
            $online.append(onlineLi);//#online插入列表内容
            $offline.append(offlineLi);//#offline插入列表内容
//            console.log(devices[15].dtu_id);

            //在地图上显示所有的标注
            for(var i = 0; i< devices.length; i++){
                var point = new BMap.Point(devices[i].dtu_lng,devices[i].dtu_lat);
                addAllMarker(point,devices[i]);
            }

            //点击列表的li，
            $('.device-searching-item').click(function(){
                var $this = $(this);
                var index = parseInt($this.attr('id'));
                $this.addClass('active').siblings().removeClass('active');
                setMarker(devices[index]);
            });
        }


        //动态获取登录token
        var token = '';
        $.post("http://120.77.83.63:8180/baod/login.shtml",{username:"root",password:"xwl001"},
            function(data){
                if(data.code == "1"){
                    token = data.data.token;
                    query(token);
                }else{

                }
            },"json");


        //加载页面时查询所有客户并写入all列表中
        function query(token){
            $.post('http://120.77.83.63:8180/baod/map/map.shtml',{token:token},function(data){

                if(data.code == '1'){
//                    console.log(data.data.devices.length);
                    console.log(data);
                    addLi(data);

                }else{
                    alert(data.msg);
                }

            }, 'json');
        }

        //点击搜索展示所有相关关键字内容
        $('.search-icon').click(function(){
            var keyWords = $('#search-input').val();
            //console.log(keyWords);
            $.post('http://120.77.83.63:8180/baod/map/map.shtml',{token:'1a4252bb-1ca9-4117-b2dd-f07c41e845d8',name:keyWords},function(data){
                if(data.code == '1'){
//                    console.log(data.data.devices.length);
                    console.log(data);

                    //清除加载页面时展示在列表中的内容
                    $all.empty();//#all插入列表内容
                    $online.empty();//#online插入列表内容
                    $offline.empty();//#offline插入列表内容

                    //在地图上显示所有的标注
                    for(var i = 0; i< devices.length; i++){
                        var point = new BMap.Point(devices[i].dtu_lng,devices[i].dtu_lat);
                        var marker = new BMap.Marker(point);
                    }
                    map.clearOverlays(marker);//清除刷新页面时已经标记的所有标记点
                    addLi(data);

                }else{
                    alert(data.msg);
                }
            },'json');
        })

    })

</script>

<script>
    $(function(){

        // ==========面包屑点击效果==========
        $('.top-list li').click(function() {
            $(this).addClass('active').siblings().removeClass('active');
        });

        //tab栏切换
        $('.device-searching-tab li').click(function(){
            $(this).addClass('active').siblings().removeClass('active');

        });
        $('#all-btn').click(function(){
            $('#all').show().siblings().hide();
        });
        $('#online-btn').click(function(){
            $('#online').show().siblings().hide();
        });
        $('#offline-btn').click(function(){
            $('#offline').show().siblings().hide();
        });

        //点击关闭按钮和展开按钮，设备搜索容器收起和展开
        $('.close-btn').click(function(){
            $('.device-searching-container').animate({'left': '-326px'},300)
        });
        $('.pickupBtn').click(function(){
            $('.device-searching-container').animate({'left': '6px'},300)
        });

    })
</script>
</body>
</html>